﻿@model Zor_Web.Models.Browse.V_ShopsBrowse
@using Webdiyer.WebControls.Mvc;
@using Zor_Tools;
@{
    Layout = null;
}
<!DOCTYPE html>

<html>
<head>
    <meta name="viewport" content="width=device-width" />
    <title>商铺浏览</title>
    <link href="~/Content/LayerUI/src/css/layui.css" rel="stylesheet" />
    <link href="~/Content/bootstrap/css/bootstrap.min.css" rel="stylesheet" />
    <link href="~/Content/Styles/zor.css" rel="stylesheet" />
    <!-- 框架必要 -->
    <script src="~/Content/Scripts/jquery/jquery-1.9.1.min.js"></script>
    <script src="~/Content/Scripts/learunui-framework.js"></script>
    <script src="~/Content/Scripts/Zor_AJax.js"></script>
    <!-- 消息提示 -->
    <script language='javascript' src='~/Content/layer/layer.js'></script>
    <!-- 日期选择器 -->
    <script src="~/Content/laydate/laydate.js"></script>
</head>
<body>
    <div class="layui-tab layui-tab-brief main-tab-container">
        <div class="col-sm-12 ct-padding">
            <button id="btnSearch" class="layui-btn  layui-btn-normal layui-btn-small"><span class="glyphicon glyphicon-search"></span>查询</button>
            <button id="btnExport" class="layui-btn layui-btn-springgreen  layui-btn-small"><span class="glyphicon glyphicon-share"></span> 导出</button>
        </div>
        <div class="col-sm-12  layui-tab-content">
            <div class="mail-box" style="overflow-x:scroll;white-space:nowrap;">
                <table class="layui-table" lay-skin="line">
                    <thead>
                        <tr>
                            <th hidden></th>
                            <th>街道办</th>
                            <th>社区</th>
                            <th>街道名称</th>
                            <th>门牌号</th>
                            <th>商铺编号</th>
                            <th>业主名称</th>
                            <th>身份证号</th>
                            <th>性别</th>
                            <th>联系电话</th>
                            <th>商铺面积</th>
                            <th>商铺用途</th>
                        </tr>
                    </thead>
                    <tbody id="accordion">
                        @foreach (var item in Model.PageData)
            {
                            <tr>
                                <td hidden>@item.Hs_Id</td>
                                <td>@item.StreetOffice</td>
                                <td>@item.Community</td>
                                <td>@item.Bd_Name</td>
                                <td>@item.Uim_Name</td>
                                <td>@item.Hs_Number</td>
                                <td>@item.NatPer_Name</td>
                                <td>@item.NatPer_IDNumber</td>
                                <td>@item.NatPer_Sex</td>
                                <td>@item.NatPer_Phone</td>
                                <td>@item.Hs_Proportion</td>
                                <td>@item.HsHousUse</td>
                            </tr>
            }
                    </tbody>
                </table>
                <div class="row">
                    <div class="col-sm-9">
                        @Html.Pager(Model.PageData, new PagerOptions { PageIndexParameterName = "index", ContainerTagName = "ul", PrevPageText = "上页", NextPageText = "下页", FirstPageText = "首页", LastPageText = "尾页", CssClass = "pagination", PagerItemsSeperator = "", CurrentPagerItemWrapperFormatString = "<li class=\"active\"><a href=\"#\">{0}</a></li>", PagerItemWrapperFormatString = "<li>{0}</li>" }, new { id = "", @class = "pagination" })
                    </div>
                    <div class="col-sm-3">
                        共 @Model.PageData.TotalItemCount 条记录，页 @Model.PageData.CurrentPageIndex/@Model.PageData.TotalPageCount
                    </div>
                </div>
            </div>
        </div>
    </div>
    <!-- 模态:查询 -->
        @using (Html.BeginForm("ShopsBrowse", "Browse", new RouteValueDictionary { { "Model", Model } }, FormMethod.Get))
        {
            <div id="QueryModal" style="display: none;padding: 20px;">
                <form class="layui-form">
                    <div class="layui-form-item">
                        <label class="col-sm-2 layui-form-label">街道办：</label>
                        <div class="col-sm-4">
                            <select name="StreetOffice" class="form-control" id="StreetOffice"></select>
                        </div>
                        <label class="col-sm-2 layui-form-label">社区：</label>
                        <div class="col-sm-4">
                            <select class="form-control" name="Community" id="Community"></select>
                        </div>
                    </div>            

                    <div class="layui-form-item">
                        <label class="col-sm-2 layui-form-label">街道名称：</label>
                        <div class="col-sm-4">
                            <input type="text" class="form-control" name="Bd_Name" value="@Model.Bd_Name">
                        </div>
                        <label class="col-sm-2 layui-form-label">门牌号：</label>
                        <div class="col-sm-4">
                            <input type="text" class="form-control" name="Uim_Name" value="@Model.Uim_Name">
                        </div>
                    </div>
                    <div class="layui-form-item">
                        <label class="col-sm-2 layui-form-label">查询起日：</label>
                        <div class="col-sm-4">
                            <input id="Hs_StateCreateTime" name="stateTime" class="form-control layer-date laydate-icon" placeholder="查询起日" onclick="laydate({ istime: false, format: 'YYYY-MM-DD' })" value="@Model.stateTime">

                        </div>
                        <label class="col-sm-2 layui-form-label">查询止日：</label>
                        <div class="col-sm-4">
                            <input id="Hs_EndCreateTime" name="endTime" class="form-control layer-date laydate-icon" placeholder="查询止日" onclick="laydate({ istime: false, format: 'YYYY-MM-DD' })" value="@Model.endTime">
                        </div>
                    </div>
                    <div class="layui-form-item">
                        <label class="col-sm-2 layui-form-label">业主名称：</label>
                        <div class="col-sm-4">
                            <input type="text" class="form-control" name="NatPer_Name" value="@Model.NatPer_Name">
                        </div>
                        <label class="col-sm-2 layui-form-label">业主身份证：</label>
                        <div class="col-sm-4">
                            <input type="text" class="form-control" name="NatPer_IDNumber" value="@Model.NatPer_IDNumber">
                        </div>
                    </div>

                    <div class="layui-form-item">
                        <label class="col-sm-2 layui-form-label">业主电话：</label>
                        <div class="col-sm-4">
                            <input type="text" class="form-control" name="NatPer_Phone" value="@Model.NatPer_Phone">
                        </div>
                        <label class="col-sm-2 layui-form-label">商铺用途：</label>
                        <div class="col-sm-4">
                            <select class="form-control" name="HsHousUse">
                                <option value="" selected>全部</option>
                                <option value="无">无</option>
                                <option value="闲置空房">闲置空房</option>
                                <option value="自住">自住</option>
                                <option value="租赁">租赁</option>
                            </select>
                        </div>
                    </div>
                </form>
                <div class="box-footer">
                    <button type="submit" id="btnQuery" class="btn btn-info pull-right">
                        <i class="fa fa-search"></i>查询
                    </button>
                </div>
            </div>
        }
    <!--商铺浏览导出-->
    <form action="/Browse/ExportShopsBrowse" enctype="multipart/form-data" method="post" id="formDownload">
        <div id="exportHtml" style="display:none;">
            <div class="eh_wrap">
                <div class="eh_head">
                    <p style="">请选择您要导出的数据列</p>
                </div>
                <table width="100%" cellpadding="5" cellspacing="0">
                    <tr>
                        <td><input id="Community" type="checkbox" value="所属社区" name="chk_list" checked="checked" /><label>所属社区</label></td>
                        <td><input id="Bd_Name" type="checkbox" value="街道名称" name="chk_list" checked="checked" /><label>街道名称</label></td>
                        <td><input id="Uim_Name" type="checkbox" value="门牌号" name="chk_list" checked="checked" /><label>门牌号</label></td>
                        <td><input id="Hs_Number" type="checkbox" value="商铺编号" name="chk_list" checked="checked" /><label>商铺编号</label></td>
                    </tr>
                    <tr>
                        <td><input id="NatPer_Name" type="checkbox" value="业主名称" name="chk_list" checked="checked" /><label>业主名称</label></td>
                        <td><input id="NatPer_IDNumber" type="checkbox" value="业主身份证号" name="chk_list" checked="checked" /><label>业主身份证号</label></td>
                        <td><input id="NatPer_Phone" type="checkbox" value="业主电话" name="chk_list" checked="checked" /><label>业主电话</label></td>
                        <td><input id="NatPer_Sex" type="checkbox" value="业主性别" name="chk_list" checked="checked" /><label>业主性别</label></td>
                    </tr>
                    <tr>
                        <td><input id="Hs_Proportion" type="checkbox" value="商铺面积" name="chk_list" checked="checked" /><label>商铺面积</label></td>                      
                        <td><input id="HsHousUse" type="checkbox" value="商铺用途" name="chk_list" checked="checked" /><label>商铺用途</label></td>
                    </tr>                  
                </table>
                <div class="box-footer">
                    <button type="submit" id="btnExportSure" class="btn btn-info pull-right">
                        <i class="fa fa-repeat"></i>导出
                    </button>
                    <input type="hidden" id="ShopsBrowseMeg" name="ShopsBrowseMeg" value="" />
                    <input type="hidden" id="where" name="where" value="" />
                </div>
            </div>
        </div>
    </form>
</body>
</html>
<script>
    /**
     * 查询
     **/
    $(function () {
        $("#btnSearch").click(function () {
            GetStreetOffice();
            GetCommunity();
            LayerOpen('750px', '380px', '查询条件', $('#QueryModal'));//打开查询信息模态框          
        })
    })

    //获取当前社区名称
    function GetCommunity() {
        getAjax("/Browse/SelectCommunity", "", function (data) {
            accordionJson = eval("(" + data + ")");
            $("#Community").append("<option value='' >---     选择社区    ---</option>")
            $.each(accordionJson, function (i) {
                $("#Community").append("<option value='" + accordionJson[i].Dt_Name + "' >" + accordionJson[i].Dt_Name + "</option>");
            });
        });

    }
    //获取当前街道办
    function GetStreetOffice() {
        getAjax("/Browse/SelectStreetOffice", "", function (data) {
            accordionJson = eval("(" + data + ")");
            $.each(accordionJson, function (i) {
                $("#StreetOffice").append("<option value='" + accordionJson[i].Dt_Name + "' >" + accordionJson[i].Dt_Name + "</option>");
            });
        });
    }

    /**
     *导出
     */
    $("#btnExport").click(function () {
        layer.open({
            type: 1,
            title: '导出提示',
            shade: false,
            skin: 'layui-layer-rim',
            area: ['620px', '280px'], //宽高
            content: $('#exportHtml')
        });
    });
    /**
      *确定导出
      */
    $("#btnExportSure").click(function () {
        var arr = new Array();
        $("[name='chk_list']").each(function () {
            if ($(this).is(":checked")) {
                arr.push($(this).attr("id") + "|" + $(this).val());
            }
        });
        $("#ShopsBrowseMeg").val(arr);
        document.getElementById('formDownload').submit();
        layer.closeAll();
    });

</script>